                                                                             <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;

    }
    .box {
      height: 480px;
      width: 1100px;
      border: 3px solid pink;
      margin: 200px auto;
    }
    .box .list {
      height: 100px;
      width: 480px;
      position: relative;
    }
    .box .list li img {
      height: 1100px;
      width: 480px;
    }
    .box .list li {
      width: 1100px;
      height: 480px;
      /*position: absolute;*/
      /*opacity: 0;*/
      /*transition: all 0.3s linear;*/
    }
    .box .btn {
      display: block;
      width: 20px;
      height: 40px;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      /*光标!!!!*/
    }
    .box .pr {
      left: 0;
    }
    .box .ne {
      right: 0;
    }
    .box .btn:hover {
      background-color: darkgray;
    }
    .box .page {
      width: 100%;
      position: absolute;
      height: 20px;
      left: 0;
      bottom: 2px;
      text-align: center;
    }
    .page li {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #fff;
      display: inline-block;
      margin: 0 3px;
      cursor: pointer;
    }
    .box .page .on {
      background-color: #0aa1ed;
    }

  </style>
</head>
<body>
    <div class="box">
        <ul class="list">
          <li class="first">
            <img src="img/Snipaste_2023-04-25_18-01-35.png">
          </li>
          <li>
            <img src="img/Snipaste_2023-04-25_18-01-50.png">
          </li>
          <li>
            <img src="img/Snipaste_2023-04-25_18-02-02.png">
          </li>
          <li>
            <img src="img/Snipaste_2023-04-25_18-03-13.png">
          </li>
          <li>
            <img src="img/video-qq9-poster.9983927f.png%20(2).webp">
          </li>
        </ul>
      <a class="btn pr"><</a>
      <a class="btn ne">></a>
        <ol class="page">
          <li class="on"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
    </div>
<script>
  const box = document.querySelector(".box"); //找到容器盒子
  const list = document.querySelector(".list");
  const listli = document.querySelectorAll(".list li");
  const len = document.querySelectorAll(".page li").length;
  const ltBtn = document.querySelector(".pr");
  const rtBtn = document.querySelector(".ne");
  const page = document.querySelector(".page");
  const pageli = document.querySelectorAll(".page li");
  //2.当前所处的下标
  var curIndex = 0;
  //3.左按钮点击事件
  ltBtn.onclick = function () {
    curIndex--;
    if (curIndex <= -1) {
      curIndex = len - 1;
    }
    console.log(listli.length);
    //当前下标相同的显示,也就是添加上on,其他的去掉on
    for (var i = 0; i < listli.length; i++) {
      listli[i].classList.remove("on");
    }
    listli[curIndex].classList.add("on");
    // 处理下标对应
    for (var j = 0; j < pageli.length; j++) {
      pageli[j].classList.remove("on");
    }
    pageli[curIndex].classList.add("on");
  };
  // 4.右按钮点击事件
  rtBtn.onclick = function () {
    curIndex++;
    if (curIndex >= len) {
      curIndex = 0;
    }
    // 当前下标相同的显示,也就添加on,其他的去掉on
    for (var i = 0; i < listli.length; i++) {
      listli[i].classList.remove("on");
    }
    listli[curIndex].classList.add("on");
    // 处理下标对应
    for (var j = 0; j < pageli.length; j++) {
      pageli[j].classList.remove("on");
    }
    pageli[curIndex].classList.add("on");
  };

  //5.分页下标点击事件
  for (var i = 0; i < pageli.length; i++) {
    //ol下的li全部添加了data-index属性,意思就是给每个li加上了属于自己的序号
    pageli[i].setAttribute("data-index", i);
    pageli[i].onclick = function () {
      console.log(this.getAttribute("data-index"));
      curIndex = this.getAttribute("data-index");
      for (var i = 0; i < listli.length; i++) {
        listli[i].classList.remove("on");
      }
      listli[curIndex].classList.add("on");
      // 处理下标对应
      for (var j = 0; j < pageli.length; j++) {
        pageli[j].classList.remove("on");
      }
      pageli[curIndex].classList.add("on");
    };
  }
  //6.自动播放
  var timer = setInterval(function () {
    rtBtn.onclick();
  }, 3000);
  //7.鼠标移入定时器停,移除,定时器开启
  box.onmouseenter = function () {
    clearInterval(timer);
  };
  box.onmouseleave = function () {
    timer = setInterval(function () {
      rtBtn.onclick();
    }, 3000);
  };
</script>
</body>
</html>